<style include="history-clusters-shared-style cr-icons">
  :host {
    --indentation: 52px;
    --search-query-margin: 10px;
    display: block;
    /* Implements the spacing between containers. */
    padding-bottom: var(--cluster-padding-vertical);
  }

  :host([in-side-panel_]) {
    --cr-icon-button-margin-start: 8px;
    padding-bottom: 0;
    padding-top: 8px;
  }

  :host([in-side-panel_][is-first]) {
    padding-top: 0;
  }

  :host-context(.focus-outline-visible):host(:focus) #container {
    box-shadow: inset 0 0 0 2px var(--cr-focus-outline-color);
  }

  :host([has-hidden-visits_]) #container {
    /* For containers with a "Show More" button, add some additional spacing for
       the pill button by adding a margin on the container. */
    margin-bottom: var(--cluster-padding-vertical);
  }

  :host([in-side-panel_]) #container url-visit:last-of-type {
    margin-bottom: 8px;
  }

  /* We need an inner container div to apply spacing between clusters. This is
     because iron-list ignores the margin on the host element. */
  :host(:not([in-side-panel_])) #container {
    background-color: var(--cr-card-background-color);
    border-radius: var(--cr-card-border-radius);
    box-shadow: var(--cr-card-shadow);
    padding: var(--cluster-padding-vertical) 0;
  }

  .label-row {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    min-height: 48px;
    min-width: 0;
    padding-inline-start: var(--cluster-padding-horizontal);
  }

  :host([in-side-panel_]) .label-row {
    min-height: 44px;
    padding-inline-start: 16px;
  }

  #label {
    color: var(--cr-primary-text-color);
    font-size: 1rem;  /* 16px */
    font-weight: 500;
  }

  :host([in-side-panel_]) #label {
    font-size: .875rem;  /* 14px */
    line-height: calc(10/7); /* 20px */
    margin-inline-end: 16px;
  }

  :host([in-side-panel_]) .timestamp {
    font-size: .75rem;  /* 12px */
    line-height: calc(5/3); /* 20px */
  }

  .debug-info {
    color: var(--cr-secondary-text-color);
  }

  #related-searches {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    /* Top is a special 8px value. */
    padding: 8px var(--cluster-padding-horizontal) var(--cluster-padding-vertical);
  }

  :host([in-side-panel_]) #related-searches {
    margin-top: -8px;
    padding: 0 16px var(--cluster-padding-vertical);
  }

  search-query {
    margin-top: var(--search-query-margin);
  }

  search-query:not(:last-of-type) {
    margin-inline-end: var(--search-query-margin);
  }
</style>
<div id="container" on-visit-clicked="onVisitClicked_"
    on-open-all-visits="onOpenAllVisits_"
    on-remove-all-visits="onRemoveAllVisits_"
    on-hide-visit="onHideVisit_"
    on-remove-visit="onRemoveVisit_">
  <div class="label-row">
    <span id="label" class="truncate"></span>
    <img is="cr-auto-img" auto-src="[[imageUrl_]]">
    <div class="debug-info">[[cluster.debugInfo]]</div>
    <div class="timestamp-and-menu">
      <div class="timestamp">[[cluster.visits.0.relativeDate]]</div>
      <cluster-menu></cluster-menu>
    </div>
  </div>
  <template is="dom-repeat" items="[[cluster.visits]]">
    <url-visit visit="[[item]]" query="[[query]]" from-persistence="[[cluster.fromPersistence]]">
    </url-visit>
  </template>
  <div id="related-searches" hidden="[[!cluster.relatedSearches.length]]"
      role="list" aria-label$="[[i18n('relatedSearchesHeader')]]"
      on-related-search-clicked="onRelatedSearchClicked_" on-mousedown="clearSelection_">
    <template is="dom-repeat" items="[[relatedSearches_]]">
      <search-query search-query="[[item]]" index="[[index]]" role="listitem">
      </search-query>
    </template>
  </div>
</div>
